import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Section, KV } from '@/components/ui/section';
import { Badge, StatusBadge } from '@/components/ui/badge';
import { JsonView } from '@/components/ui/json-view';
import { getRun } from '@/lib/queries/sources';
import { fmtDateTime, fmtDuration, fmtInt } from '@/lib/format';

export default async function RunPage({ params }: { params: Promise<{ runId: string }> }) {
  const { runId } = await params;
  const r = await getRun(runId);
  if (!r) notFound();
  return (
    <div className="space-y-8">
      <header className="pt-4">
        <p className="ci-kicker">Ingest run</p>
        <h1 className="ci-mono text-2xl font-sans">{r.id}</h1>
        <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px]">
          <Link className="ci-link" href={`/source/${r.source_slug}`}>
            {r.source_name ?? r.connector_id}
          </Link>
          <StatusBadge status={r.status} />
          <Badge tone="outline">{r.mode}</Badge>
          {r.anomaly ? <Badge tone="danger">anomaly: {r.anomaly}</Badge> : null}
        </p>
      </header>
      <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
        <Section id="counts" kicker="Counts" title="Records and requests">
          <KV
            items={[
              { k: 'Started', v: fmtDateTime(r.started_at) },
              { k: 'Finished', v: r.finished_at ? fmtDateTime(r.finished_at) : 'running' },
              { k: 'Duration', v: fmtDuration(r.duration_ms) },
              { k: 'Fetched', v: <span className="ci-num">{fmtInt(r.records_fetched)}</span> },
              { k: 'Created', v: <span className="ci-num">{fmtInt(r.records_created)}</span> },
              { k: 'Updated', v: <span className="ci-num">{fmtInt(r.records_updated)}</span> },
              { k: 'Unchanged', v: <span className="ci-num">{fmtInt(r.records_unchanged)}</span> },
              { k: 'Rejected', v: <span className="ci-num">{fmtInt(r.records_rejected)}</span> },
              { k: 'Validation failures', v: <span className="ci-num">{fmtInt(r.validation_failures)}</span> },
              { k: 'HTTP requests / failures', v: <span className="ci-num">{fmtInt(r.http_requests)} / {fmtInt(r.http_failures)}</span> },
              { k: 'Rate-limit events', v: <span className="ci-num">{fmtInt(r.rate_limit_events)}</span> },
              { k: 'Dataset version', v: r.dataset_version ? <span className="ci-mono">{r.dataset_version}</span> : null },
              { k: 'Error', v: r.error ? <span className="text-danger">{r.error}</span> : null },
            ]}
          />
        </Section>
        <Section id="cursor" kicker="Restartability" title="Cursor before / after">
          <div className="grid gap-4 sm:grid-cols-2">
            <div>
              <p className="ci-kicker mb-1">Before</p>
              <JsonView data={r.cursor_before} />
            </div>
            <div>
              <p className="ci-kicker mb-1">After</p>
              <JsonView data={r.cursor_after} />
            </div>
          </div>
        </Section>
      </div>
      <Section id="drift" kicker="Schema drift" title={`Drift signals (${r.schema_drift?.length ?? 0})`}>
        {r.schema_drift?.length ? <JsonView data={r.schema_drift} /> : <p className="text-[13px] text-ink-3">No schema drift detected in this run.</p>}
      </Section>
      <Section id="log" kicker="Log" title={`Log (${r.log?.length ?? 0} lines)`}>
        {r.log?.length ? (
          <pre className="ci-code max-h-[600px] overflow-auto">
            {r.log.map((l, i) => (
              <div key={i} className={l.level === 'error' ? 'text-danger' : l.level === 'warn' ? 'text-warn' : ''}>
                <span className="text-ink-3">{l.t}</span> <span className="uppercase">{l.level.padEnd(5)}</span> {l.msg}
              </div>
            ))}
          </pre>
        ) : (
          <p className="text-[13px] text-ink-3">Empty log.</p>
        )}
      </Section>
    </div>
  );
}